import { useRef } from 'react';

import cs from 'classnames';
import { Autoplay, Grid, Navigation, Pagination, Scrollbar } from 'swiper/modules';
import { SwiperClass, Swiper as SwiperComponent, SwiperSlide } from 'swiper/react';

import styles from './index.module.scss';

export type SwiperProps = React.ComponentProps<typeof SwiperComponent> & {
  className?: string;
};

const Swiper: React.FC<SwiperProps> & {
  SwiperSlide: typeof SwiperSlide;
} = ({ ...rest }) => {
  const swiper = useRef<SwiperClass>();

  const onSwiper: SwiperProps['onSwiper'] = (instance) => {
    swiper.current = instance;
    rest.onSwiper?.(instance);
  };

  return (
    <>
      <SwiperComponent
        modules={[Navigation, Pagination, Scrollbar, Grid, Autoplay]}
        {...rest}
        className={cs(styles['swiper'], rest.className)}
        onSwiper={onSwiper}
      />
    </>
  );
};

Swiper.SwiperSlide = SwiperSlide;
export default Swiper;
